<script setup lang="ts">
import { Ref, onMounted, ref, watch } from 'vue';


import { AxesViewer, Color4, Engine, FreeCamera, HemisphericLight, Mesh, Quaternion, Scene, Vector3 } from '@babylonjs/core';
import { BLUE, GREEN, createProbe } from '../mesh';

// Side-effects only imports allowing the standard material to be used as default.
import "@babylonjs/core/Materials/standardMaterial";
// Side-effects only imports allowing Mesh to create default shapes (to enhance tree shaking, the construction methods on mesh are not available if the meshbuilder has not been imported).
import "@babylonjs/core/Meshes/Builders/sphereBuilder";
import "@babylonjs/core/Meshes/Builders/boxBuilder";
import "@babylonjs/core/Meshes/Builders/groundBuilder";

interface Props {
    realRotation: Quaternion,
    targetRotation: Quaternion | null,
    predRotation: Quaternion | null,
}

const props = defineProps<Props>()

const rootCanvas: Ref<HTMLCanvasElement | null> = ref(null)

// const rotation: Ref<Quaternion> = ref(Quaternion.Identity())

const probe: Ref<Mesh | null> = ref(null)

const targetProbe: Ref<Mesh | null> = ref(null)

const predProbe: Ref<Mesh | null> = ref(null)

onMounted(() => {
    const canvas = rootCanvas.value;
    const engine = new Engine(canvas);
    const scene = new Scene(engine);

    const camera = new FreeCamera("camera1", new Vector3(8, 2, -0.5), scene);
    camera.setTarget(Vector3.Zero())
    camera.attachControl(canvas, true);

    const axes = new AxesViewer(scene, 7, 0)
    axes.update(Vector3.Zero(), new Vector3(1, 0, 0), new Vector3(0, 1, 0), new Vector3(0, 0, -1))

    const light = new HemisphericLight("light1",  new Vector3(0, 1, 0), scene);
    light.intensity = 0.7

    probe.value = createProbe('probe', new Color4(1, 1, 1, 1), scene)

    targetProbe.value = createProbe('target-probe', BLUE, scene)
    targetProbe.value.visibility = 0.4
    targetProbe.value.isVisible = false

    predProbe.value = createProbe('pred-probe', GREEN, scene)
    predProbe.value.visibility = 0.6
    predProbe.value.isVisible = false

    engine.runRenderLoop(() => {
        scene.render()
    })

})

watch(() => props.realRotation, (curr, _) => {

    if (probe.value !== null) {
        if (curr == undefined) {
            probe.value.rotationQuaternion = Quaternion.Identity()
            return;
        }
        probe.value.rotationQuaternion = curr
    }
})

watch(() => props.targetRotation, (curr, _) => {
    if (targetProbe.value === null) {
        return;
    }

    if (curr === null) {
        targetProbe.value.isVisible = false
    } else {
        targetProbe.value.isVisible = true
        targetProbe.value.rotationQuaternion = curr
    }
})

watch(() => props.predRotation, (curr, _) => {
    if (predProbe.value === null) {
        return;
    }

    if (curr === null) {
        predProbe.value.isVisible = false
    } else {
        predProbe.value.isVisible = true
        predProbe.value.rotationQuaternion = curr
    }
})

</script>

<template>
<div>
    <canvas ref="rootCanvas" class="review-canvas" width="1024" height="1024">
    </canvas>
</div>
</template>

<style>

.review-canvas {
    width: 100%;
    aspect-ratio: 1;
}


</style>